<template>
  <div class="login">
    <!-- 登录页头部模块 -->
    <Lheader></Lheader>

    <!-- 登录模块 -->
    <div class="module">
      <div class="logo">
        <h1>HarSine</h1>
      </div>

      <div class="title">
        <h3>登录账户</h3>
      </div>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
        <el-form-item prop="email">
          <el-input style="width: 330px" v-model="ruleForm.email" placeholder="请输入邮箱账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码（6-20位数字、字母组合）"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 330px; background-color: #f63f00; border-color: white" type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>

      <div class="bottom">
        <p>
          请仔细阅读红信
          <a href="" style="color: #6d9ffd; text-decoration: none">服务协议、隐私政策</a>
          ，登录、注册即表示同意
        </p>
        <div>
          <router-link to="" style="">忘记密码？</router-link>
          <router-link to="/Register" style="">创建账户</router-link>
        </div>
      </div>
    </div>

    <!-- 登录页脚部模块 -->
    <Lfooter></Lfooter>
  </div>
</template>

<script>
import { login } from "@/api/login";

export default {
  data() {
    //验证邮箱账号格式
    var checkEmail = (rule, value, callback) => {
      const ruless = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!ruless.test(value)) {
        return callback(new Error("邮箱格式错误"));
      } else {
        callback();
      }
    };
    //验证密码格式
    var checkPassword = (rule, value, callback) => {
      const CPassword = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/;
      if (!CPassword.test(value)) {
        return callback(new Error("密码格式错误"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        email: "",
        password: "",
        delivery: false,
      },
      rules: {
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            validator: checkEmail,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            validator: checkPassword,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        //验证通过，发请求去登录
        if (valid) {
          console.log("正确，可以登陆");

          //登录请求
          login({
            email: this.ruleForm.email,
            password: this.ruleForm.password,
          }).then((res) => {
            console.log(res);
          });
          //登陆成功后跳转到首页
          this.$router.push({
            path: "/SafeTalk",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
  
<style scoped>
.login {
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/* 登录模块 */
.module {
  margin: 15vh 0;
  padding: 25px;
  border-radius: 5%;
  box-shadow: 0 6px 10px 10px #F7F7F7;
}
.logo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}
.title {
  margin: 23px 0;
}

.bottom {
  width: 330px;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.bottom p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #bdc2c8;
}
.bottom div {
  width: 100%;
  font-size: 15px;

  display: flex;
  justify-content: space-between;
}
.bottom div a {
  margin-top: 25px;
  text-decoration: none;
  color: #6d9ffd;
}

::v-deep(.el-button--primary) {
  border-color: white !important;
}
</style>